<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{padding: 0;margin: 0;}
        ul,li{list-style: none;}
        ul{border: 1px solid #c3c3c3;width: 500px;margin: 0 auto;margin-top:60px; }
        li{border-bottom: 1px solid #c3c3c3; padding: 10px; color: #666;}
        #del,#read{padding: 5px;}
        .f-select{
               height: 100px;
               line-height: 100px;
        }
    </style>
    <script type="text/javascript" language="javascript">
    function xuan(){
        //获取name值
        var qcheck=document.getElementsByName("check[]");
        //全选的按钮
            for(var i=0;i<=qcheck.length;i++){
                if(qcheck[i].checked){
                    qcheck[i].checked=false;
                     }else{
                    qcheck[i].checked=true;
                    }
                }
        }
    function deltr(){
        var num=0;
        var input=document.getElementsByName("check[]");
        for(var i=input.length-1; i>=0;i--){
           if(input[i].checked==true){
                num++;
            }
        }
        if(num == 0){ 
            alert('请选择！'); 
        }
        if(num > 0&&num<input.length){ 
            var con= confirm('您要删除所选择的选项！');
            if(con){
                del();
            }
        }  
        if(num == input.length){
            var con= confirm('您要全部删除！');
            if(con){
                del();
            }
        }      
    }
    function read(){
        var num=0;
        var input=document.getElementsByName("check[]");
        for(var i=input.length-1; i>=0;i--){
           if(input[i].checked==true){
                num++;
            }
        }
        if(num == 0){ 
            alert('请选择！'); 
        }
        if(num > 0){ 
            var con= confirm('您要将所选择的选项记为已读！');
            if(con){
                red();
            }
        }  
    }
    function del(){
        var input=document.getElementsByName("check[]");
        for(var i=input.length-1; i>=0;i--){
            if(input[i].checked==true){
              //获取li节点
              var li=input[i].parentNode;
              //获取ul节点
              var ul=li.parentNode;
              //移除子节点
              ul.removeChild(li); 
            }
        }
    }
    function red(){
        var input=document.getElementsByName("check[]");
        for(var i=input.length-1; i>=0;i--){
            if(input[i].checked==true){
              //获取li节点
              var li=input[i].parentNode;
              //获取ul节点
              // var ul=li.parentNode;
              //移除子节点
              li.style.color="#333"; 
            }
        }
    }    
</script>
</head>
<body>
    <ul>
        <li>
          <input id="check-all" onclick="xuan()"  type="checkbox">全选
          <input type="button" id="del" onclick="deltr()" value="删除所选">  
          <a  id="read" onclick="read()" href="javascript:;" > 记为已读 </a>
          <select class="f-select" name="" id="">
            <option value="">消息类型</option>
            <option value="1">公告</option>
            <option value="2">系统通知</option>
        </select>
        </li>
        <li>
            <input type="checkbox" name="check[]">
            <span>张三10</span>
            <span>我是邮件11</span>
            <span>我是附属信息11</span>
        </li>
        <li>
            <input type="checkbox" name="check[]">
            <span>张三11</span>
            <span>我是邮件11</span>
            <span>我是附属信息11</span> 
        </li>
        <li>
            <input type="checkbox" name="check[]">
            <span>张三12</span>
            <span>我是邮件11</span>
            <span>我是附属信息11</span> 
        </li>
        
    </ul>
</body>
</html>